<template>
  <div class="czxjg-c" @click=" gotList()">
    <div class="czxjg-kk">
      <div class="czxjg-cca">
        <div class="czxjg-c-a" :style="{ 'background-color': getColor(index) }">
          {{ info.shortName }}
        </div>

        <div class="czxjg-c-aa">
          <div class="czxjg-c-aaa">{{ info.d2CorpName }}</div>

          <div class="czxjg-c-b">
            <div
              class="czxjg-c-bb"
              v-for="(item, index) in info.labelList"
              :key="index"
              :style="{
                backgroundColor: item.backgroundColor,
                color: item.fontColor,
              }"
            >
              {{ item.name }}
            </div>
            <!-- <div class="czxjg-c-bbb">{{房屋建筑业}}</div> -->
          </div>
          <div class="czxjg-c-d">
            <div class="czxjg-c-dd">{{ info.d2LegalPer }}</div>
            <div class="czxjg-c-ddd">{{ info.d2Regcap }}</div>
            <div class="czxjg-c-dddd">{{ info.d2Esdate }}</div>
          </div>
        </div>
      </div>
      <div class="czxjg-d">
        <img
          src="../../assets/imgs/djl/dianhuaqq.png"
          alt=""
          class="czxjg-dd"
        />
        <div class="czxjg-ddd">{{ info.d2Tel }}</div>
      </div>
      <div class="czxjg-e">
        <img src="../../assets/imgs/djl/dianhuaq.png" alt="" class="czxjg-ee" />
        <div class="czxjg-eee">
          {{ info.d2Dom }}
        </div>
      </div>
    </div>
    <div class="czxjg-ee"></div>
  </div>
</template>

<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    info: {
      type: Object,
    },
    name: {
      type: String,
    },
    index: {
      type: Number,
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getColor(index) {
      const colors = ["#CCA5D5", "#E4EFFF", "#3F9F71", "#7DB7B7", "#E3F2ED"];
      return colors[this.getRandomInt(0, 4)];
    },
    gotList() {
      // this.$router.push({
      //   path: "/djlczx/qiyexiangqing",
      //   query: {
      //     corpKey: this.info.corpKey,
      //   },
      // });
      this.$emit('event-name',this.info.corpKey);
    },
  },
};
</script>

<style scoped lang="scss">
.czxjg-c {
  .czxjg-kk {
    // height: 180px;
    overflow: hidden;
    .czxjg-cca {
      display: flex;
      margin: 14px 0 0 9px;
      .czxjg-c-a {
        width: 37px;
        height: 37px;
        background: #d99d9a;
        // background: #d99d9a !important;
        border-radius: 4px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 13px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        flex-shrink: 0;
      }

      .czxjg-ca {
        background: #d99d9a;
      }
      .czxjg-caa {
        background: #74a8e7;
      }
      .czxjg-caaa {
        background: #cca5d5;
      }

      .czxjg-c-aa {
        margin-left: 6px;
        .czxjg-c-aaa {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          line-height: 20px;
        }
        .czxjg-c-b {
          display: flex;
          margin-top: 7px;
          flex-wrap: wrap;
          // .czxjg-c-bb {
          //   background: rgba(227, 242, 237, 0.2);
          //   border-radius: 2px;
          //   // border: 1px solid #3f9f71;
          //   font-family: Alibaba PuHuiTi;
          //   font-weight: 500;
          //   font-size: 12px;
          //   // color: #3f9f71;
          //   text-align: center;
          //   line-height: 21px;
          //   width: 42px;
          //   height: 21px;
          // }
          .czxjg-c-bb {
            height: 21px;
            border-radius: 2px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 12px;
            line-height: 21px;
            padding: 0 11px 0 10px;
            margin-right: 7px;
            margin: 3px;
            text-align: center;
          }
        }
        .czxjg-c-d {
          display: flex;
          margin-top: 9px;
          align-items: center;
          .czxjg-c-dd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #2c2c2c;
          }
          .czxjg-c-ddd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #989898;
            margin-left: 21px;
          }
          .czxjg-c-dddd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #989898;

            margin-left: 21px;
          }
        }
      }
    }
    .czxjg-d {
      display: flex;
      margin: 5px 0 0 9px;
      align-items: center;
      .czxjg-dd {
        width: 11px;
        height: 13px;
      }
      .czxjg-ddd {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #3282e4;
        margin-left: 5px;
      }
    }
    .czxjg-e {
      display: flex;
      margin: 5px 58px 0 9px;
      position: relative;
      .czxjg-ee {
        width: 11px;
        height: 13px;
        position: absolute; /* 使图片绝对定位 */
        top: -12px; /* 图片距离容器顶部的距离 */
        left: 0; /* 图片距离容器左侧的距离 */
      }
      .czxjg-eee {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #3282e4;
        margin-left: 17px;
      }
    }
  }

  .czxjg-ee {
    margin-top: 16px;
    height: 9px;
    background: #f3f3f3;
  }
}
</style>
